<template>
	<view class="bg-white bg">
		<titleBar title="排行榜" isReturn="true" textAlign="center"></titleBar>

		<scroll-view :style="{height: scprllHeight + 'rpx'}" scroll-y="true" refresher-enabled="true"
			:refresher-triggered="triggered" :refresher-threshold="100" refresher-background="lightgreen"
			@refresherpulling="onPulling" @refresherrefresh="onRefresh" @refresherrestore="onRestore"
			@refresherabort="onAbort" @scrolltolower="onReachBottom">
			<view class="elist" v-for="(item,index) in announcementList " :key="index" :value="item"
				style=" padding:5% 5% 0% 5%; text-align: left;">
				<view style=" display: flex;justify-content: space-between;border-bottom: 1px solid lightgray;">
					<view style=" display: flex;justify-content: space-between;padding-bottom: 5%;">
						<view :class="'rank-'+(index+1)" style="margin: 5% 0%;">
							{{index+1}}
						</view>
						<view v-if="index==0" class="iconfont icon-guanjun1" style="margin: 5% 0%;">
							{{item.name}}
						</view>
						<view v-else-if="index==1" class="iconfont icon-guanjun2" style="margin: 5% 0%;">
							{{item.name}}
						</view>
						<view v-else-if="index==2" class="iconfont icon-guanjun3" style="margin: 5% 0%;">
							{{item.name}}
						</view>
						<view v-else class="iconfont icon-guanjun" style="margin: 5% 0%;">
							{{item.name}}
						</view>
					</view>
					<view class="iconfont" style="width: 44%;text-align: left;">打卡次数： {{item.count}}</view>

				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import titleBar from '@/components/titleBar/titleBar.vue'
	export default {
		components: {

			titleBar,

		},

		data() {
			return {
				triggered: false,
				announcementList: [

				],
				token: '',
				isVisitor: uni.getStorageSync("isVisitor")
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('token')
			console.log(this.token);
			console.log(this.isVisitor);
			this.getAnnouncementList()
		},
		methods: {
			onPulling(e) {
				this.triggered = true
			},
			//2、触发刷新
			onRefresh() {
				if (this._freshing) return
				this._freshing = true
				//显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 
				wx.showLoading({
					title: '刷新中...',
				})
				// 添加定时器1秒后执行的操作
				setTimeout(() => {
					this.triggered = false
					this._freshing = false
					if (this.announcementList.length > 0) {
						this.announcementList = []
						this.getAnnouncementList()
					} else {
						this.getAnnouncementList()
					}
				}, 1000)
			},
			//3、触发重置
			onRestore() {
				this.triggered = 'restore' // 需要重置
				wx.hideLoading();
				wx.showToast({
					title: "刷新成功",
					duration: 1000, //提示的延迟时间，单位毫秒，默认：1500 
					mask: true //是否显示透明蒙层，防止触摸穿透，默认：false 			    
				})
				this.triggered = false
			},
			//4、触发终止
			onAbort() {
				//停止下拉刷新
				wx.stopPullDownRefresh();
			},
			onReachBottom() {
				wx.showToast({
					title: "已经到达底部",
					duration: 1500, //提示的延迟时间，单位毫秒，默认：1500 低于默认值可能有bug
					mask: true, //是否显示透明蒙层，防止触摸穿透，默认：false 			    
				})
			},
			getAnnouncementList() {
				var that = this
				that.announcementList = []
				uni.request({
					url: "https://www.turkeylike.cn:8900/fzulab/userClockInCount/getAll",
					method: 'GET',
					header: {
						'content-type': 'application/json;charset:utf-8',
						'token': that.token
					},
					success(res) {

						console.log(res);
						console.log(res.data.code);
						if (that.isVisitor == true) {
							console.log(that.isVisitor);
							uni.showModal({
								title: '提示',
								content: '请先登录系统！',
								confirmColor: '#ee6666', //确定字体颜色
								showCancel: false, //有取消按钮的弹框
								confirmText:'确认',
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateBack();
										
									} 
								}
							});
						} else {
							let urlList = res.data
							console.log(urlList)
							var count=''
							for (var i = 0; i < urlList.length; i++) {
								if(urlList[i].clockInCount>=1000){
									count='999+'
								}else{
									count=JSON.stringify(urlList[i].clockInCount)
								}
								that.announcementList.push({
									'name': urlList[i].username,
									'count': count,
								})
							}
						}


					}
				})
				console.log(that.announcementList);
			},

			
		}
	}
</script>

<style lang="scss">
	@for $var from 1 through 20{
		@if $var <=4 {
			.rank-#{$var} {
				color: #fff;
				width: 50rpx;
				height: 50rpx;
				font-size: 35rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				background-color: rgba(orangered, (14-$var)/20);
				padding: 5%;
			}
		}

		/*后6条*/
		@if $var>4 {
			.rank-#{$var} {
				width: 50rpx;
				height: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 35rpx;
				color: lightslategray;
				padding: 5%;
			}
		}
	}



	.up-button {
		display: inline-block;
		width: 100px;
		height: 40px;
		background: linear-gradient(to right, rgb(2, 135, 246), rgb(25, 180, 188));
		border-radius: 5px;
		font-size: 16px;
		line-height: 40px;
		color: white;
		margin-bottom: 10px;
		margin-right: auto;
	}
</style>
